if (!window.openDatabase)
{
	alert("Soz. Your browser doesn't support WebSQL... try this on Safari, Chrome, Opera or the Android browser.");
}
else if(document.getElementById('stfMain') == null)
{

	(function()
	{
		var pageURL = window.location.href;
		var pageTitle = document.title;
		var saveThisDB;
		var getEl = function(id){ return document.getElementById(id); }

		var setupDB = function()
		{
			var shortName = 'saveThisDB';  
			var version = '1.0';  
			var displayName = 'SaveThis! Database';  
			var maxSize = 250000; //  bytes  
			saveThisDB = openDatabase(shortName, version, displayName, maxSize);  
			
			saveThisDB.transaction(  
				function (transaction) {  
					transaction.executeSql('CREATE TABLE IF NOT EXISTS saved_sites(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, url TEXT NOT NULL);', [], function(result){ console.log(result); }, function(transaction, error){ console.log(error); });
				}
			);		
		}
		
		var buildUI = function(callback)
		{
			var stf = document.createDocumentFragment();

			var ss = document.createElement('style');
			ss.type = "text/css";
			ss.innerHTML = "#stfMain { font-family: sans-serif; font-size: 14px; color: #fff; position: fixed; left: 20px; bottom: 20px; width: 350px; height: 150px; border-radius: 15px 15px 15px 15px; padding: 0px; margin: 0px; }";
			ss.innerHTML += "#closeButton { position: absolute!important; right: 10px!important; top: 10px!important; color: #fff!important; text-decoration: none!important; }";

			ss.innerHTML += ".mainButton { position: absolute!important!important; -moz-box-shadow: 0px 1px 20px -7px #000000!important; -webkit-box-shadow: 0px 1px 20px -7px #000000!important; box-shadow: 0px 1px 20px -7px #000000!important;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffaa00), color-stop(1, #fff203) )!important;background:-moz-linear-gradient( center top, #ffaa00 5%, #fff203 100% )!important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaa00', endColorstr='#fff203')!important;background-color:#ffaa00!important;-moz-border-radius:18px!important;-webkit-border-radius:18px!important;border-radius:18px!important;border:1px solid #cc7a00!important;display:inline-block!important;color:#ffffff!important;font-family:arial!important;font-size:15px!important;font-weight:bold!important;padding:7px 22px!important;text-decoration:none!important;text-shadow:0px 1px 3px #000000!important; }";
			ss.innerHTML += ".mainButton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fff203), color-stop(1, #ffaa00) )!important; background:-moz-linear-gradient( center top, #fff203 5%, #ffaa00 100% )!important; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff203', endColorstr='#ffaa00')!important; background-color:#fff203!important; }";
			
			ss.innerHTML += "#viewHolder { color: #000; position: absolute; padding: 10px; top: 35px; left: 10px; width: 310px; height: 10px; display: none; background-color: #fff; border-radius: 15px 15px 15px 15px; height: 10px; overflow: auto; }";
			ss.innerHTML += "#viewHolder p a { color: rgba(0,158,208,1); text-decoration: none; font-size: 12px; }";
			ss.innerHTML += "#viewHolder p a:hover { color: rgba(0,158,208,1); text-decoration: underline; font-size: 12px; }";
			ss.innerHTML += "#viewHolder p { padding: 5px; }";
			ss.innerHTML += "#viewHolder p.even { background-color: rgba(0,158,208,0.2); }";
			
			document.getElementsByTagName('head')[0].appendChild(ss);
			
			var stfMainDiv = document.createElement('div');
			var viewHolder = document.createElement('div');
			var closeButton = document.createElement('a');
			var saveThisButton = document.createElement('a');
			var viewThisButton = document.createElement('a');
			
			stfMainDiv.style.backgroundColor = "rgba(0,158,208,0.0)";
			stfMainDiv.setAttribute('id','stfMain');
			
			closeButton.innerText = "close";
			closeButton.setAttribute('href', 'javascript:void(0)');
			closeButton.setAttribute('id', 'closeButton');
			
			saveThisButton.innerText = "SaveThis!";
			saveThisButton.setAttribute('href', 'javascript:void(0)');
			saveThisButton.setAttribute('id', 'saveThisButton');
			saveThisButton.className = "mainButton";

			
			viewThisButton.innerText = "ViewThis!";
			viewThisButton.setAttribute('href', 'javascript:void(0)');
			viewThisButton.setAttribute('id', 'viewThisButton');
			viewThisButton.className = "mainButton";

			viewHolder.setAttribute('id', 'viewHolder');
			
			stfMainDiv.appendChild(closeButton);
			stfMainDiv.appendChild(saveThisButton);
			stfMainDiv.appendChild(viewThisButton);
			stfMainDiv.appendChild(viewHolder);
			
			stf.appendChild(stfMainDiv);
			document.body.appendChild(stf);

			viewThisButton.style.left = "50%";
			viewThisButton.style.top = "80px";
			viewThisButton.style.marginLeft = "-" + getEl('viewThisButton').offsetWidth / 2 + "px";
			
			saveThisButton.style.left = "50%";
			saveThisButton.style.top = "40px";
			saveThisButton.style.marginLeft = "-" + getEl('saveThisButton').offsetWidth / 2 + "px";
			
			callback();
		
		}
		
		var open = function(id,o)
		{
			var el = getEl(id);
			var RGB = el.style.backgroundColor.slice(0, el.style.backgroundColor.lastIndexOf(','));
			var A = parseFloat(el.style.backgroundColor.slice(el.style.backgroundColor.lastIndexOf(', ') + 1, el.style.backgroundColor.lastIndexOf(')')));

			if(A >= o)
			{
				A = o;
				el.style.backgroundColor = RGB + ", " + A + ")";
			}
			else if(A < o)
			{
				A += 0.1;
				el.style.backgroundColor = RGB + ", " + A + ")";
				setTimeout(function(){ open(id,o); }, 25);
			}
		}
		
		var close = function(id)
		{
			
			var el = getEl(id);
			var RGB = el.style.backgroundColor.slice(0, el.style.backgroundColor.lastIndexOf(','));
			var A = parseFloat(el.style.backgroundColor.slice(el.style.backgroundColor.lastIndexOf(', ') + 1, el.style.backgroundColor.lastIndexOf(')')));

			if(A <= 0)
			{
				A = 0;
				el.style.backgroundColor = RGB + ", " + A + ")";
				el.parentNode.removeChild(el);
			}
			else if(A > 0)
			{
				A -= 0.1;
				el.style.backgroundColor = RGB + ", " + A + ")";
				setTimeout(function(){ close(id); }, 25);
			}
		}
		
		var view = function()
		{
		
			var dataReturned = "";
		
			var getData = function()
			{
				var onSuccess = function(t,r)
				{
					for (var i=0; i<r.rows.length; i++)
					{
						var item = r.rows.item(i);
						var cssClass = i%2 === 0 ? "odd" : "even";
						dataReturned += "<p class=\""+cssClass+"\"><a href=\""+item.url+"\">"+item.title+"</a></p>";
					}
					console.log(dataReturned);
					getEl('viewHolder').innerHTML = dataReturned;
				}

				var onFail = function(t,e)
				{
					console.log(e);
				}

				var readDB = function()
				{

					saveThisDB.transaction( 
						function (transaction) {
							transaction.executeSql('SELECT * FROM saved_sites;', [], onSuccess, onFail);
						}
					);	
				}

				readDB();
				
			}
		
			var expandView = function(id,speed)
			{
				getEl(id).style.display = "block";
				if(getEl(id).offsetHeight < getEl('stfMain').offsetHeight - 60)
				{
					getEl(id).style.height = getEl(id).offsetHeight + speed + "px";
					setTimeout(function(){ expandView(id,speed); }, 1000/60);
				}
				else if(getEl(id).offsetHeight >= getEl('stfMain').offsetHeight - 60)
				{
					getEl(id).offsetHeight = getEl('stfMain').offsetHeight - 60;
					
				}			
			}
		
			var expandY = function(id,speed)
			{
				if(getEl(id).offsetHeight < window.innerHeight / 2)
				{
					getEl(id).style.height = getEl(id).offsetHeight + speed + "px";
					setTimeout(function(){ expandY(id,speed); }, 1000/60);
				}
				else if(getEl(id).offsetHeight >= window.innerHeight / 2)
				{
					getEl(id).offsetHeight = window.innerHeight / 2;
					expandView('viewHolder', 1000/60);
				}
			}
			
			getData();
			expandY('stfMain',20);
			getEl('saveThisButton').style.display = "none";
			getEl('viewThisButton').style.display = "none";
			
		}
		
		var save = function()
		{
			var onSuccess = function(t,r)
			{
				console.log("yay");
				console.log(r);
			}
			
			var onFail = function(t,e)
			{
				console.log("nay");
				console.log(e);
			}
			
			var writeDB = function()
			{
				saveThisDB.transaction( 
					function (transaction) {
						transaction.executeSql('INSERT INTO saved_sites(id,title,url) VALUES (?,?,?);', [null, pageTitle, pageURL], onSuccess, onFail);
					}
				);	
			}	

			writeDB();
			
		}
		
		var init = function()
		{
			setupDB();
			buildUI(function(){ open('stfMain', 0.9); });
			getEl('closeButton').addEventListener('click', function(){ close('stfMain'); });
			getEl('saveThisButton').addEventListener('click', function(){ save(); });
			getEl('viewThisButton').addEventListener('click', function(){ view(); });
		}
		
		init();
		
	})();
	
}